<template>
    <div class="page">
        <div class="top-bar van-hairline--bottom">
            <div class="user-icon">
                {{userName}}
            </div>
            <div class="user-name">
                {{userName}}
            </div>
            <div class="user-time">
                {{currentDay|format('YYYY-MM-DD')}} {{currentDay|format('dddd')}}
            </div>
        </div>
        <oa-calendar :select-day="currentDay" :mark-date="markDate" @choseDay="onChoseDay"></oa-calendar>
        <div class="card-empty" v-if="startCard == null && endCard == null">
            <div class="card-circle">
                <i class="iconfont oa-xiuxi"></i>
            </div>
            <p style="margin-top: 8px">当日没有打卡记录</p>
        </div>
        <div class="card-info" v-else>
            <van-steps direction="vertical" :active="0" active-color="#389df1">
                <van-step v-if="startCard">
                    <card-info-item :wifi="startCard.wifi == 1" :late="startCard.CardTime|isLate" :out="startCard.inout" title="上班打卡"
                                    :time="startCard.CardTime|formatLong" :address="startCard.address"></card-info-item>
                </van-step>
                <van-step v-else>
                    无上班打卡信息
                </van-step>
                <van-step v-if="endCard">
                    <card-info-item :wifi="endCard.wifi == 1" :late="endCard.CardTime|isLate" :out="endCard.inout" title="下班打卡"
                                    :time="endCard.CardTime|formatLong" :address="endCard.address"></card-info-item>
                </van-step>
                <van-step v-else>
                    无下班打卡信息
                </van-step>
            </van-steps>
        </div>
    </div>
</template>

<script>
    import OaCalendar from "../components/Calendar";
    import dayjs from 'dayjs'
    import service from "../apiNet";
    import CardInfoItem from "../components/CardInfoItem";

    export default {
        name: "DayCalendar",
        components: {CardInfoItem, OaCalendar},
        data() {
            return {
                markDate: [],
                currentDay: new Date(),
                userName: "",
                userId: "",
                startCard: null,
                endCard: null
            }
        },
        filters: {
            formatLong(value) {
                return dayjs(value).format("HH:mm")
            },
            isLate(value, start) {
                return dayjs(value).isAfter(dayjs("09:00"))
            }
        },
        methods: {
            onChoseDay(date) {
                this.currentDay = dayjs(date).toDate()
                // console.log( )
                this.loadCardInfo()
            },
            loadCardInfo() {

                service.loadCardDetail(this.currentDay, this.userId).then(res => {
                    console.log(res)
                    if (res.Error == 0) {
                        this.startCard = res.Data.morning
                        this.endCard = res.Data.afternoon
                    }
                }).catch(error => {
                    console.error(error)
                })
            }
        },
        mounted() {
            this.userId = this.$route.query.userId
            this.userName = this.$route.query.userName
            this.currentDay = dayjs(this.$route.query.date).toDate();
            this.loadCardInfo()
        }
    }
</script>

<style scoped lang="less">
    .top-bar {
        background: #fff;
        height: 60px;
        flex-direction: row;
        align-items: center;
        display: flex;
        padding: 0 15px;
        .user-name {
            margin-left: 10px;
            color: #333333;
            font-size: 15px;
        }
        .user-icon {
            width: 40px;
            border-radius: 50%;
            height: 40px;
            text-align: center;
            line-height: 40px;

            background: #44bdf1;
            color: #fff;
            font-size: 12px;
        }
        .user-time {
            margin-left: auto;
            font-size: 12px;
            color: #666666;
        }
    }

    .card-info {
        background: #fff;
        min-height: 200px;

    }

    .card-empty {
        background: #fff;

        min-height: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #999999;
        font-size: 20px;
        font-weight: 600;
        .card-circle {

            align-self: center;
            width: 100px;
            height: 100px;
            border-radius: 80px;
            background: #e8e8e8;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .iconfont {
                font-size: 48px;
                color: #888;
            }
        }
    }
</style>